<template>
  <div class="temp">
    <el-row class="temp-top small">
      <el-col :span="16" class="temp-title">
        {{data.templateName}}
      </el-col>
      <el-col :span="8" class="edit-text" v-if="!data.isDefault">
        最后编辑时间：{{ data.modifyTime&& new Date(data.modifyTime).format('yyyy-MM-dd hh:mm:ss')}}
        <router-link class="template-item-edit" :to="{
          path:'/training/curriculum/setTem',
          query:Object.assign({}, this.$route.query, {tempId: data.id, state: 'edit'})
        }">
          <el-button type="link">修改</el-button>
        </router-link>        
        <el-button type="link" @click="del(listData[0])">删除</el-button>
      </el-col>
    </el-row>
    <el-table  border class="temp-table"
      :data="listData">
      <el-table-column
        label="教学信息">
        <template slot-scope="scope">
          <template v-if="scope.row.teachInfo">
              <el-tag class="e-tag" type="success"
                v-if="!item.isUserSet && item.value && teachInfo.value"
                v-for="item in teachInfo.list"
                :key="item.name">
                {{item.name.replace('：', '')}}
              </el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="教学过程">
        <template slot-scope="scope">
          <template v-if="scope.row.teachProcess">
            <el-tag class="e-tag" type="success" 
              v-if="!item.isUserSet && item.value"
              v-for="item in teachProcess.list"
              :key="item.name">
              {{item.name.replace('：', '')}}
            </el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="课后小结">
        <template slot-scope="scope">
          <template v-if="scope.row.teachSummary.indexOf('list') > -1 ">
            <el-tag class="e-tag" type="success" 
              v-for="item in teachSummary.list"
              :key="item.name">
              {{item.name.replace('：', '')}}
            </el-tag>
          </template>
          <template v-else>
            <el-tag v-if="teachSummary.value" class="e-tag" type="success" >
              {{teachSummary.name.replace('：', '')}}
            </el-tag>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {type: Object}
  },
  created () {
    if (this.data) {
      this.teachSummary = JSON.parse(this.data.teachSummary)
      this.teachProcess = JSON.parse(this.data.teachProcess)
      this.teachInfo = JSON.parse(this.data.teachInfo)
      this.listData.push(this.data)
    }
  },
  data () {
    return {
      listData: [],
      teachInfo: {},
      teachProcess: {},
      teachSummary: {}
    }
  },
  methods: {
    del (item) {
      this.$emit('delete', item)
    }
  }
}
</script>

<style lang="scss">
.temp{
  padding-left: 30px;
  margin-top: -16px;
  .temp-top{
  margin-bottom: 10px;
    .temp-title{
      font-weight: 700;
      color: #5d5d5d;
    }
  }
}
.e-tag{
  margin: 0 10px 8px 0;
}
.edit-text{
  color:#909090;
  line-height: 18px;
}
.temp-table td{
  border-left:1px solid #f2f2f2;
}
.template-item-edit{
  margin: 0 5px;
}
</style>
